<style scoped>
@import "../assets/css/Login.css";
</style>
<style scoped>
@import "../assets/css/Login.css";
</style> 
<template>
<body style="background-color: gray;">
  <div class="container">
    <div class="row">
      <div class="offset-md-3 col-md-6">
        <div class="form-horizontal" style="height:400px">
          <span class="heading">停车场管理系统</span>
          <div class="form-group">
            <input
              class="form-control"
              id="inputEmail3"
              v-model="loginForm.number"
              placeholder="用户名或电子邮件"
            />
            <i class="fa fa-user"></i>
          </div>
          <div class="form-group help">
            <input
              type="password"
              class="form-control"
              id="inputPassword3"
              v-model="loginForm.password"
              placeholder="密　码"
            />
            <i class="fa fa-lock"></i>
            <a href="#" class="fa fa-question-circle"></a>
          </div>
          <div class="form-group">
            <div class="main-checkbox">
              <input type="checkbox" value="None" id="checkbox1" name="check" v-model="checked" />
              <label for="checkbox1"></label>
            </div>
            <span class="text">Remember me</span>
            <button @click="login" class="btn btn-default col-3">登录</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      loginForm: {
        number: "",
        password: ""
      },
      checked: true
    };
  },
  mounted() {
   
  },

  methods: {
    ...mapMutations(["changeLogin"]),
    login() {
      let _this = this;
      if (this.loginForm.number === "" || this.loginForm.password === "") {
        alert("账号或密码不能为空");
      } else {
        console.log(this.checked);
        if (this.checked == true) {
          console.log("checked == true");
        } else {
          console.log("清空Cookie");
        }
        this.$ajax({
          method: "post",
          url: "/admin/login",
          withCredentials: true,
          data: _this.loginForm
        })
          .then(res => {
            console.log(res);
            
            if (res.data.error_no === 1) {
              this.$message({
                type: "success",
                message: "登录成功!"
              });
              var mytoken=res.data.data.token
            _this.changeLogin({ Authorization: res.data.data.role,username:_this.loginForm.number,Auth:mytoken});

            _this.$router.push("/admin/overview");
            } else {
              this.$message({
                type: "info",
                message: res.data.error_msg
              });
             throw error;
              console.log(error);
            }
          })
          .catch(error => {
            localStorage.removeItem("Auth");
             localStorage.removeItem("username");
            localStorage.removeItem("Authorization");
            this.$router.push("/login");
            console.log(error);
          });
      }
    },
   
  }
};
</script>